<template>
    <div class="tableContent">
            <div class="content">
                <el-table
                    ref="multipleTable"
                    :data="parentTableData.result"
                    class="commonTable"
                    tooltip-effect="dark"
                    height="100%"
                    style="width: 100%"
                    @row-click="selectMeal"
                    @selection-change="handleSelectionChange"
                    highlight-current-row
                    stripe>
                    <el-table-column
                        type="selection"
                        >
                    </el-table-column>
                    <el-table-column
                        label="序号"
                        align="center"
                        >
                        <template slot-scope="scope">
                            {{ scope.$index + (parentDefault.pageIndex - 1) * parentDefault.pageSize + 1 }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="dishesName"
                        label="菜品名称"
                        align="center"
                        >
                    </el-table-column>
                    <el-table-column
                        prop="dishesCategoryId"
                        :formatter="getCategory"
                        label="类别"
                        align="center"
                    >
                    </el-table-column>
                    <el-table-column
                    prop="price"
                    label="价格（元）"
                    align="center"
                    >

                    </el-table-column>
                    <el-table-column
                        prop="netContent"
                        label="菜品净含量"
                        align="center"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="dishesList"
                        label="主料信息"
                        align="center"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="dishesPictures"
                        label="图片"
                        align="center"
                    >
                    </el-table-column>
                    <el-table-column>
                        <template slot-scope="scoped">
                            <el-button type="text"  @click="edit(scoped.row)">编辑</el-button>
                            <el-button type="text"  @click="del(scoped.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="parentDefault.pageIndex"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="parentDefault.pageSize"
                        :total="parentTableData.toTalCount"
                        layout="total, sizes, prev, pager, next, jumper"
                        >
                    </el-pagination>
                </div>
            </div>
        </div>
</template>

<script>
import moment from 'moment';
export default {
    props:['parentTableData', 'parentDefault', 'setCurrentMeal', 'setParentSelection','claId','currentMeal',],
    data() {
        return {
            currentPage: 1,
            multipleSelection: []
        }
    },
    methods: {
        // 菜品类型
        getCategory(val,row){
          if (val.dishesCategoryId == 1) return  '煮菜'
          if (val.dishesCategoryId == 2) return  '甜品'
          if (val.dishesCategoryId == 3) return '点心'
          if (val.dishesCategoryId == 4) return '炒菜'
          if (val.dishesCategoryId == 5) return '蒸菜'
        },
        setSelection(arr){
            this.multipleSelection = arr;
            console.log(arr)
        },
        // 编辑
        edit() {
            if(Object.keys(this.currentMeal).length) {
            this.title = 2;
            this.dialogVisible = true;
            }else {
            this.$message({
                message: '请先选择一种菜品',
                type: 'warn',
            });
            }
        },
        // 删除
        del(){
            if(!this.multipleSelection.length){
            this.$message({
                message: '请先选择一种菜品',
                type: 'warn',
            });
            }else {
            this.$confirm('删除后不可恢复，确认删除选中的数据吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteMeal();
            })
            }
        },
         //删除
        deleteMeal() {
            let arr = [];
            this.multipleSelection.forEach(item => {
            arr.push(item.id)
            });
            const url = this.urlPrev+`/api/SetMealManagement/VarietyOfDishesDelete?id=`+arr;
            axios({ method: 'post', url: url})
                .then(rsp => {
                    if (rsp.data.status == 1) {
                    this.getTableData();
                    }else if(rsp.data.status == 0){
                        this.$message({
                            message: rsp.data.message,
                            type: 'error',
                        });
                    }
                })
                .catch(err => console.log(err));
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
            this.$emit('setParentSelection',this.multipleSelection);
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        // 当前选中菜类
        selectMeal(data) {
            this.$emit('setCurrentMeal', data);
        }
    }
}
</script>

<style lang="scss" scoped>
    .tableContent {
       width: 100%;
       height: 100%;
       .content {
           padding-top: 40px;
           height: calc(100% - 40px);
       }
   }
</style>
